<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<!--
v-bind 对css样式的控制案例
点击哪个li标签哪个标签就亮
-->
<style>
    #app ul {
        display: flex;
        list-style: none;
        padding: 0px;
        margin: 0px;
    }

    #app li {
        padding: 10px 20px;
        margin-right: 10px;
    }

    .bak {
        background-color: pink;
    }
</style>

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in list" :key="item.id" v-bind:class="{bak:activityIndex === index}" v-on:click="activityIndex = index">
                {{item.name}}
            </li>
        </ul>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                activityIndex:0,
                list: [{ id: 1, name: "京东秒杀" }, { id: 2, name: "每日特价" }, { id: 3, name: "品类秒杀" }]
            }
        })
    </script>

</body>

</html>